<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="tong.li&#39;s blog">
  <meta name="keyword" content="彤哥哥博客，95后技术爱好者,现就职于同程旅行/同程艺龙上海分公司，专注于互联网技术分享的平台。">
  
    <link rel="shortcut icon" href="/css/images/icon.png">
  
  <title>
    
      彤哥哥的博客
    
  </title>
  <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/highlight.js/9.12.0/styles/tomorrow-night.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
  
  
    <!-- MathJax support START -->
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="https://cdn.staticfile.org/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <!-- MathJax support END -->
  


  
  
    
<script src="/js/local-search.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>
  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>彤哥哥的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link active">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/series/" class="item-link">分类</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/project/" class="item-link">项目</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于</a>
          
        </li>
      
      
        <li class="menu-item menu-item-search right-list">
    <a role="button" class="popup-trigger">
        <i class="fa fa-search fa-fw"></i>
    </a>
</li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link mobile-active">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/series/" class="menu-link">分类</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/project/" class="menu-link">项目</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于</a>
            
          </li>
        
      </ul>
    </div>
    
      <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
            <span class="search-icon">
                <i class="fa fa-search"></i>
            </span>
            <div class="search-input-container">
                <input autocomplete="off" autocapitalize="off"
                    placeholder="Please enter your keyword(s) to search." spellcheck="false"
                    type="search" class="search-input">
            </div>
            <span class="popup-btn-close">
                <i class="fa fa-times-circle"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>
    
  </div>
</header>

    <main class="app-body">
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/02/03/Vue%E6%96%B0%E6%89%8B%E8%BF%9B%E9%98%B6%E6%8C%87%E5%8D%97/">Vue新手进阶指南</a>
      </h2>
      <p class="article-date">February 3, 2020</p>
      
        
  <a href="/tags#Vue" >
    <span class="tag-code">Vue</span>
  </a>

      
      <div class="article-summary">
        
          1. Vue生命周期1.1 什么是生命周期
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子：就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件

1.2 Vue实例的生命周期
创建期间的生命周期函数：
bef ...
        
      </div>
      <a class="more" href="/2020/02/03/Vue%E6%96%B0%E6%89%8B%E8%BF%9B%E9%98%B6%E6%8C%87%E5%8D%97/">阅读更多</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/02/02/Vue%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97/">Vue新手入门指南</a>
      </h2>
      <p class="article-date">February 2, 2020</p>
      
        
  <a href="/tags#Vue" >
    <span class="tag-code">Vue</span>
  </a>

      
      <div class="article-summary">
        
          1. 为什么要学习流行框架
企业使用框架是为了提高开发效率：在企业中，时间就是效率，效率就是金钱；提高开发效率的发展历程：原生JS -&gt; JQuery之类的类库 -&gt; 前后端模板引擎(ejs/JSP/Freemaker/Thymeleaf/Velocity) -&gt; Angu ...
        
      </div>
      <a class="more" href="/2020/02/02/Vue%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97/">阅读更多</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/01/01/Adobe%20Premiere%E8%A7%86%E9%A2%91%E5%89%AA%E8%BE%91%E5%BF%85%E5%A4%87%E5%BF%AB%E6%8D%B7%E9%94%AE/">Adobe Premiere视频剪辑必备快捷键</a>
      </h2>
      <p class="article-date">January 1, 2020</p>
      
        
  <a href="/tags#Primiere" >
    <span class="tag-code">Primiere</span>
  </a>

      
      <div class="article-summary">
        
          在我们日常剪辑软件的过程中，快捷键的学习是必不可少的一环，熟练地使用他们可以显著提高我们的剪辑效率，本文，我就来分享一下，PR剪辑中我使用最多的几个剪辑快捷键，新手到进阶都有哦!

新手起步


功能描述
快捷键



隐藏标题栏,扩大显示区域
Ctrl+\


剃刀工具，快速切开视频轨道， ...
        
      </div>
      <a class="more" href="/2020/01/01/Adobe%20Premiere%E8%A7%86%E9%A2%91%E5%89%AA%E8%BE%91%E5%BF%85%E5%A4%87%E5%BF%AB%E6%8D%B7%E9%94%AE/">阅读更多</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2020/01/01/ES6%E5%9B%9E%E9%A1%BE/">ES6回顾</a>
      </h2>
      <p class="article-date">January 1, 2020</p>
      
        
  <a href="/tags#JavaScript" >
    <span class="tag-code">JavaScript</span>
  </a>

      
      <div class="article-summary">
        
          1. 了解ES61.1 为什么要回顾ES6
作为后端工程师，学习前端知识，遵循人无我有、人有我优的原则，保持竞争力
现在使用的主流前端框架都是基于ES6，学好前端，ES6+就是必修课，原生JS玩的溜，什么流行框架都是浮云。
想做全栈工程师，能够在公司独当一面的人绝对是受人(尤其是老板)欢迎的 ...
        
      </div>
      <a class="more" href="/2020/01/01/ES6%E5%9B%9E%E9%A1%BE/">阅读更多</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2019/12/23/%E8%B7%9F%E7%9D%80%E5%BD%A4%E5%93%A5%E5%AD%A6%E7%BD%91%E7%BB%9C-%E7%BD%91%E7%BB%9C%E5%B1%82%E4%B9%8BIPv4/">跟着彤哥学网络-网络层之IPv4</a>
      </h2>
      <p class="article-date">December 23, 2019</p>
      
        
  <a href="/tags#计算机网络" >
    <span class="tag-code">计算机网络</span>
  </a>

      
      <div class="article-summary">
        
          1 IPv4组成与分类1.1 IPv4组成我们把整个互联网看成为一个单一的、抽象的网络。IP 地址就是给每个连接在互联网上的主机（或路由器）分配一个在全世界范围是唯一的32位的标识符。
IP 地址现在由互联网名字和数字分配机构ICANN (Internet Corporation for A ...
        
      </div>
      <a class="more" href="/2019/12/23/%E8%B7%9F%E7%9D%80%E5%BD%A4%E5%93%A5%E5%AD%A6%E7%BD%91%E7%BB%9C-%E7%BD%91%E7%BB%9C%E5%B1%82%E4%B9%8BIPv4/">阅读更多</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2019/12/22/%E8%B7%9F%E7%9D%80%E5%BD%A4%E5%93%A5%E5%AD%A6%E7%BD%91%E7%BB%9C-%E5%88%9D%E8%AF%86%E7%BD%91%E7%BB%9C%E5%B1%82/">跟着彤哥学网络-初识网络层</a>
      </h2>
      <p class="article-date">December 22, 2019</p>
      
        
  <a href="/tags#计算机网络" >
    <span class="tag-code">计算机网络</span>
  </a>

      
      <div class="article-summary">
        
          1. 网络层提供的两种服务
在计算机网络领域，网络层应该向运输层提供怎样的服务（“面向连接”还是“无连接”）曾引起了长期的争论。
争论焦点的实质就是：在计算机通信中，可靠交付应当由谁来负责？是网络还是端系统？ 

1.1 两种不同的观点一种观点：让网络负责可靠交付。
这种观点认为，应借助于电 ...
        
      </div>
      <a class="more" href="/2019/12/22/%E8%B7%9F%E7%9D%80%E5%BD%A4%E5%93%A5%E5%AD%A6%E7%BD%91%E7%BB%9C-%E5%88%9D%E8%AF%86%E7%BD%91%E7%BB%9C%E5%B1%82/">阅读更多</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2019/12/21/%E8%B7%9F%E7%9D%80%E5%BD%A4%E5%93%A5%E5%AD%A6%E7%BD%91%E7%BB%9C-%E5%88%9D%E8%AF%86%E7%BD%91%E7%BB%9C/">跟着彤哥学网络-初识网络</a>
      </h2>
      <p class="article-date">December 21, 2019</p>
      
        
  <a href="/tags#计算机网络" >
    <span class="tag-code">计算机网络</span>
  </a>

      
      <div class="article-summary">
        
          1.1 为什么要学网络
身为计算机专业以及IT从业者，基础性东西必须要懂，不然都不好意思在这行混。
熟悉网络原理，可以解决日常家用级或企业级的网络故障问题，不然就花钱请人解决网络故障吧。
可以考华为或思科网络认证，为自己再谋一份出路，不然就等35岁行业危机吧。
作为新时代的你，多学点知识，多 ...
        
      </div>
      <a class="more" href="/2019/12/21/%E8%B7%9F%E7%9D%80%E5%BD%A4%E5%93%A5%E5%AD%A6%E7%BD%91%E7%BB%9C-%E5%88%9D%E8%AF%86%E7%BD%91%E7%BB%9C/">阅读更多</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2019/11/27/Zookeeper%E9%9B%86%E7%BE%A4%E6%90%AD%E5%BB%BA/">Zookeeper集群搭建</a>
      </h2>
      <p class="article-date">November 27, 2019</p>
      
        
  <a href="/tags#Zookeeper" >
    <span class="tag-code">Zookeeper</span>
  </a>

      
      <div class="article-summary">
        
          1. 准备工作
安装JDK
Zookeeper安装包下载，这里我选择3.5.6进行下载
准备三台机器，分别是192.168.5.1,192.168.5.100,192.168.5.101
将zookeeper的安装包上传到这三台机器相同的目录上(方便管理)

2. 开始搭建2.1 配置集群  ...
        
      </div>
      <a class="more" href="/2019/11/27/Zookeeper%E9%9B%86%E7%BE%A4%E6%90%AD%E5%BB%BA/">阅读更多</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2019/11/23/Linux%E5%9F%BA%E7%A1%80-SSH%E5%85%8D%E5%AF%86%E7%99%BB%E5%BD%95/">Linux基础-SSH免密登录</a>
      </h2>
      <p class="article-date">November 23, 2019</p>
      
        
  <a href="/tags#Linux" >
    <span class="tag-code">Linux</span>
  </a>

      
      <div class="article-summary">
        
          Linux SSH登录由两种方式:

账户密码登录

密钥登录


我有两台主机，ip分别为192.168.5.1和192.168.5.100，我要从前者远程登录到后者主机上，下面我分别来演示一下两种方式:
1. 账号密码登录1ssh root@192.168.5.100

注意： 默认端口 ...
        
      </div>
      <a class="more" href="/2019/11/23/Linux%E5%9F%BA%E7%A1%80-SSH%E5%85%8D%E5%AF%86%E7%99%BB%E5%BD%95/">阅读更多</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2019/11/20/RocketMQ%E6%B6%88%E6%81%AF%E5%8F%91%E9%80%81%E6%A0%B7%E4%BE%8B/">RocketMQ消息发送样例</a>
      </h2>
      <p class="article-date">November 20, 2019</p>
      
        
  <a href="/tags#RocketMQ" >
    <span class="tag-code">RocketMQ</span>
  </a>

      
      <div class="article-summary">
        
          1. 消息发送样例
导入MQ客户端依赖

 maven pom.xml文件配置

   123456&lt;dependency&gt;    &lt;groupId&gt;org.apache.rocketmq&lt;/groupId&gt;    &lt;artifactId&gt;ro ...
        
      </div>
      <a class="more" href="/2019/11/20/RocketMQ%E6%B6%88%E6%81%AF%E5%8F%91%E9%80%81%E6%A0%B7%E4%BE%8B/">阅读更多</a>
    </article>
  

  
    <div class="guide-pager">
  
    <a href="/page/3/"><span class="page-arrow">← </span>Prev</a>
  
  
    <a href="/page/5/">Next<span class="page-arrow"> →</span></a>
  
</div>
  
</main>


    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    &copy; 2024 | Proudly powered by <a href="https://hexo.io" target="_blank">Hexo</a>
    <br>
    Theme by <a target="_blank" rel="noopener" href="https://github.com/ltyeamin">tong.li</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("https://cdn.staticfile.org/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      hljs.configure({useBR: true});
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->



<script src='https://cdn.staticfile.org/mermaid/8.11.2/mermaid.min.js'></script>



<script src="/js/script.js"></script>


  </body>
</html>